<template>
  <div class='homeContent'>
    <a-collapse class="kjcdDiv" defaultActiveKey="1">
      <a-collapse-panel key="1" header="快捷菜单">
        <a-row justify="space-around" type="flex">
          <a-col v-for="(item,key) of shortcutmenu" :key='item.id' :span="2">
            <a @click="changeNav(item.url, item.firstNav, item.secNav)">
              <a-icon :theme="item.type=='team'?'outlined':'filled'"
                      :type="item.type"/>
              {{ item.name }}
            </a>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>

    <a-row :gutter="16">
      <a-col :span="12" class="gutter-row">
        <a-collapse defaultActiveKey="1">
          <a-collapse-panel key="1" :disabled='true' :showArrow="false">
            <template slot="header">
              临期提醒
              <a-button :style="customStyle" @click="changeNav('/Tip', '4', '4')">查看更多
                <a-icon type="right"/>
              </a-button>
            </template>
            <a-table :columns="tipColumns"
                     :dataSource="tipData"
                     :pagination="false"
                     :showHeader="false">
              <span slot="tipTitle" slot-scope="text">{{ "【" + text + "】" }}</span>
            </a-table>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
      <a-col :span="12" class="gutter-row">
        <a-collapse defaultActiveKey="1">
          <a-collapse-panel key="1" :disabled='true' :showArrow="false">
            <template slot="header">
              数据简报
              <!-- <a-select :style="customSelect" defaultValue="1"
                        @change="handleDataChange">
                          <a-select-option value="0">今天</a-select-option>
                          <a-select-option value="1">本周</a-select-option>
                          <a-select-option value="2">本月</a-select-option>
                          <a-select-option value="3">本年</a-select-option>
                        </a-select> -->
            </template>
            <a-row justify="space-around" type="flex">
              <a-col v-for="(item,key) of data" :key='item.id' :span="6">
                <span class="dataName">{{ item.dataName }}</span>
                <span class="dataValue">{{ item.dataValue }}</span>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="12" class="gutter-row">
        <a-collapse defaultActiveKey="1">
          <a-collapse-panel key="1" :disabled='true' :showArrow="false">
            <template slot="header">
              等级数量
            </template>
            <djsl-chart></djsl-chart>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
      <a-col :span="12" class="gutter-row">
        <a-collapse defaultActiveKey="1">
          <a-collapse-panel key="1" :disabled='true' :showArrow="false">
            <template slot="header">
              军民分布
            </template>
            <jmzb-chart></jmzb-chart>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="12" class="gutter-row">
        <a-collapse defaultActiveKey="1">
          <a-collapse-panel key="1" :disabled='true' :showArrow="false">
            <template slot="header">
              等级分布
            </template>
            <djfb-chart></djfb-chart>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
      <a-col :span="12" class="gutter-row">
        <a-collapse defaultActiveKey="1">
          <a-collapse-panel key="1" :disabled='true' :showArrow="false">
            <template slot="header">
              企业漏斗
            </template>
            <qyld-chart></qyld-chart>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import moment from 'moment';
  import JMZBchart from './JMZBchart'
  import DJSLchart from './DJSLchart'
  import DJFBchart from './DJFBchart'
  import QYLDchart from './QYLDchart'

  import {GETDATAPAPER, GETDEADLINETIP} from '@/../static/js/apis.js'

  export default {
    name: 'shortcutMenu',
    components: {
      jmzbChart: JMZBchart,
      djslChart: DJSLchart,
      djfbChart: DJFBchart,
      qyldChart: QYLDchart
    },
    data() {
      return {
        customStyle: {
          position: 'absolute',
          right: '15px',
          top: '7px',
          borderColor: '#933',
        },
        customSelect: {
          position: 'absolute',
          right: '15px',
          top: '7px',
          width: '300px'
        },
        /*快捷菜单*/
        shortcutmenu: [],
        /*数据简报*/
        data: [],
        /*临期提醒*/
        tipData: [],
        tipColumns: []
      }
    },
    methods: {
      moment: moment,  //日期选择器
      /*获取静态数据*/
      getStaticData() {
        this.tipColumns = this.$HPStaticMenu.tipColumns;
        this.shortcutmenu = this.$HPStaticMenu.shortcutmenu;
      },
      /*数据简报筛选*/
      handleDataChange() {
        const self = this;
        GETDATAPAPER('', function (res) {
          if (res.dataPaper)
            self.data = res.dataPaper;
        })
      },
      /*获取临期提醒*/
      getDeadLineTip() {
        const self = this;
        GETDEADLINETIP('', function (res) {
          if (res.tips) {
            self.tipData = res.tips;
          }
        })
      },
      changeNav(url, firstNav, secNav) {
        this.$router.push({path: url})
      }
    },
    created() {
      this.getStaticData();
    },
    mounted() {
      this.getDeadLineTip();
      this.handleDataChange();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*快捷菜单*/
  .homeContent {
    width: 94%;
    margin: 20px 3%;
  }

  .ant-collapse {
    margin-bottom: 15px;
  }

  /deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    font-size: 16px;
    background-color: #e5e5e5;
    border-radius: 0px;
  }

  /*快捷菜单*/
  .ant-col-2,
  .ant-col-6 {
    text-align: center;
  }

  .ant-col-2 a {
    color: #333;
  }

  .ant-col-2 a i {
    font-size: 36px;
    display: block;
    margin-bottom: 10px;
    color: #999;
  }

  .ant-col-2:hover a,
  .ant-col-2:hover i {
    color: #006DA2 !important;
    font-weight: 700;
    text-shadow: 0px 0px 2px #ccc;
  }

  /*其他header*/
  /deep/ .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
  .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
    color: #333;
    cursor: default;
  }

  /*数据简报*/
  .ant-col-6 {
    height: 100px;
    color: #333;
    padding: 20px 0;
  }

  .dataName {
    display: block;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .dataValue {
    font-size: 20px;
    color: #933;
    font-weight: 700;
  }

  /*非快捷菜单*/
  /deep/ .ant-collapse-content {
    height: 230px;
  }

  /deep/ .kjcdDiv .ant-collapse-content {
    height: auto;
  }
</style>
